<template>
  <div>
      <h5>欢迎光临vue商城</h5>
       <h4>苹果{{price}}元一斤折扣{{discount}}折</h4>
       <span>请输入斤数</span><input type="number" v-model="kg"><br>
       <button @click="btn">结账买单</button>
       <h4>总价{{t_price}}元折扣价{{d_price}}元，节省了{{save}}</h4>
        
  </div>
</template>

<script>
export default {
  data () {
      return {
          price: 10, // 单价
          discount:8,  //折扣
          t_price:0, // 总价
          kg:0,  // 千克
          d_price:0, // 折扣价
          save:0, // 节省
      }
  },methods: {
      btn(){
        this.t_price=this.price*Number(this.kg);
         this.d_price=this.price*Number(this.kg)*(this.discount/10);
         this.save=this.t_price-this.d_price
      }
  }
}
</script>

<style>

</style>